<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <PageLayout :navbarShow="false">
    <view style="width: 750rpx; height: 750rpx"><l-echart ref="chartRef"></l-echart></view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import * as echarts from 'echarts'
defineOptions({
  name: 'message',
  options: {
    // apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
    // shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
    styleIsolation: '‌shared‌',
  },
})
const chartRef = ref(null)
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    confine: true,
  },
  legend: {
    data: ['单位净值', '基准线'],
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 15,
    top: 40,
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
    },
  ],
  series: [
    {
      name: '单位净值',
      type: 'line',
      showAllSymbol: true,
      data: [],
      itemStyle: {
        color: '#ffa500',
      },
    },
    {
      name: '基准线',
      type: 'line',
      symbol: 'none',
      data: [],
      itemStyle: {
        color: '#cdcdb4',
      },
      lineStyle: {
        type: 'dashed',
      },
    },
    {
      name: '加仓线',
      type: 'line',
      symbol: 'none',
      data: [],
      itemStyle: {
        color: '#ff7256',
      },
      lineStyle: {
        type: 'dashed',
      },
    },
    {
      name: '安全线',
      type: 'line',
      symbol: 'none',
      data: [],
      itemStyle: {
        color: '#ffc0cb',
      },
      lineStyle: {
        type: 'dashed',
      },
    },
    {
      name: '减仓线',
      type: 'line',
      symbol: 'none',
      data: [],
      itemStyle: {
        color: '#32cd32',
      },
      lineStyle: {
        type: 'dashed',
      },
    },
    {
      name: '危险区',
      type: 'line',
      symbol: 'none',
      data: [],
      itemStyle: {
        color: '#c1ffc1',
      },
      lineStyle: {
        type: 'dashed',
      },
    },
  ],
}

const getLineData = async () => {
  const params = { code: '161725', str: '近6月' }
  await http.get('/sys/fundVal/queryLine', params).then((res: any) => {
    if (res.success) {
      const result = res.result
      result.forEach((i: any) => {
        option.xAxis[0].data.push(i.da)
        // 标记点颜色
        let symbolColor = 'red'
        if (i.tip === '加仓') {
          symbolColor = 'red'
        } else if (i.tip === '安全区') {
          symbolColor = 'blue'
        } else if (i.tip === '减仓') {
          symbolColor = 'green'
        } else if (i.tip === '危险区') {
          symbolColor = 'black'
        }
        option.series[0].data.push({
          value: i.now_val,
          symbol: i.tip.length > 1 ? 'circle' : 'none',
          itemStyle: { color: symbolColor },
          date: i.val_date,
        })
        option.series[1].data.push(i.mo60)
        option.series[2].data.push(i.jiacang_line)
        option.series[3].data.push(i.safe_line)
      })
      option.yAxis[0].min = Math.min(...option.xAxis[0].data) - 0.1
    }
  })
}

onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  setTimeout(async () => {
    await getLineData()
    if (!chartRef.value) return
    const myChart = await chartRef.value.init(echarts)
    myChart.setOption(option)
  }, 300)
})
</script>

<style lang="scss" scoped>
.wrap {
  height: 100%;
}
:deep(.wd-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
  &.mp {
    .wd-tabs__nav-container {
      padding-right: 7%;
    }
  }
  .wd-tabs__nav {
    background: linear-gradient(45deg, #0081ff, #1cbbb4);
    height: var(--nav-height);
    padding-top: var(--status-bar-height);
    .wd-tabs__nav-item {
      color: #fff;
    }
  }
  .wd-tabs__container {
    flex: 1;
    width: 100%;
  }
  .wd-tabs__body {
    position: relative;
  }
  .wd-tabs__line {
    background-color: #fff;
  }
}
:deep(.wd-tab) {
  .wd-tab__body {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
}
</style>
